<template>
  <t-dialog confirmBtn="复制链接" :visible="visible" header="邀请成员" :on-close="close" @confirm="onConfirmAnother">
    <template #body>
      <t-row :gutter="16">
        <t-col :span="12" style="margin-bottom: 24px">
          <div class="crad-top hw-box-style-flex hw-box-style-flex-r-center">
            <div class="title1">成员可通过邀请链接加入团队，加入后成为</div>
            <div style="flex: 1">
              <t-select v-model="inviteInfo.roleType" placeholder="请选择云产品" style="width: 100%" @change="change">
                <t-option v-for="item in options2" :key="item.value" :value="item.value" :label="item.label"></t-option>
              </t-select>
            </div>
          </div>
        </t-col>
      </t-row> 
      <t-row :gutter="16">
        <t-col :span="12">
          <div class="put-title-box hw-box-style-flex hw-box-style-flex-r-center hw-box-style-flex-between">
            <span>{{ linkUrl }}?sid={{ cid }}</span>
            <div class="right-icon hw-flex-style-c-c hw-click-cursor" @click="init">
              <t-icon name="refresh" />
            </div> 
          </div>
        </t-col>
      </t-row>
    </template>
    <template #footer>
      <div class="hw-box-style-flex hw-box-style-flex-r-center hw-box-style-flex-between">
        <div class="title-3 hw-box-style-flex">
          <span>链接有效期：</span> 
          <span class="title-5" @click="setDay">{{ inviteInfo.duration }}天</span>
        </div>
        <div>
          <t-button variant="outline" theme="default" @click="close">取消</t-button>
          <t-button theme="primary" @click="onConfirmAnother">复制链接</t-button>
        </div>
      </div>
    </template>
  </t-dialog>
</template>

<script setup lang="ts">
// @ts-nocheck
import { linkUrl } from '@/utils/variable';
import { invite } from '@/api/company/company';
import { number } from 'echarts/core';
import { ref, reactive } from 'vue';
import { MessagePlugin } from 'tdesign-vue-next';
const props = defineProps({
  visible: {
    type: Boolean,
  },
  authenticationId: {
    type: Number,
  },
  inviteId: {
    type: Number,
  },
  refType: {
    type: Number,
  },
});
const cid = ref(0);
const inviteInfo = reactive({
  id: 0,
  refType: 1,
  duration: 14,
  roleType: 3,
  refId: 0,
  password: null,
});

const emit = defineEmits(['oks', 'closes']);
const onConfirmAnother = (context?: any) => {
  //   emit('oks');
  var cInput = document.createElement('input');
  cInput.value = `${linkUrl}?sid=${cid.value}`; //{{ linkUrl }}?sid={{ cid }}
  document.body.appendChild(cInput);
  cInput.select(); // 选取文本框内容
  document.execCommand('copy');

  // 复制成功后再将构造的标签 移除
  document.body.removeChild(cInput);
  MessagePlugin.success('复制成功');
};
const change = () => {
  init();
};
const setDay = () => {
  if (inviteInfo.duration == 14) {
    inviteInfo.duration = 7;
  } else {
    inviteInfo.duration = 14;
  }
  init();
};
const init = async () => {
  try {
    // console.log(props.inviteId, '111111111');
    inviteInfo.refId = props.inviteId;
    inviteInfo.refType = props.refType;
    let { data } = await invite(inviteInfo);
    cid.value = data;
  } catch {}
};
init();
const options2 = [
  { label: '查看人', value: 3 },
  { label: '参与人', value: 2 },
];
const close = (context?: any) => {
  emit('closes');
};
</script>

<style lang="less" scoped>
.title1 {
  width: 340px;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.9);
  line-height: 22px;
  margin-right: 12px;
}
.put-title-box {
  width: 100%;
  padding: 8px 12px;
  padding-left: 12px;
  background: #eeeeee;
  border-radius: 3px;
  border: 1px solid #dcdcdc;
  font-size: 18px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.26);
  line-height: 24px;
  span {
    flex: 1;
    font-size: 17px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.26);
    line-height: 24px;
  }
}
.right-icon {
  width: 24px;
  height: 24px;
}
.title-3 {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.6);
  line-height: 20px;
  .title-5 {
    cursor: pointer;
    color: rgba(210, 173, 119, 0.9);
    border-bottom: 1px solid rgba(210, 173, 119, 0.9);
  }
}
:deep(.t-dialog__header) {
  height: 64px;
}
.t-row {
  margin: 0;
}
.t-col {
  // margin-top: 32px;
}
:deep(.t-dialog) {
  width: 600px;
}
:deep(.t-input) {
  height: 40px;
}
.crad-top {
  width: 100%;
}
</style>
